<template>
  <v-calendar v-model="selectedDate">
    <template #day-content="{ day }">
      <div style="position: relative" @click="handleSelect(day.id)">
        <span tabindex="-1" :aria-label="day.ariaLabel" :aria-disabled="day.isDisabled"
              role="button" class="vc-day-content vc-focusable"
        >{{ day.day }}</span>
<!--        <span class="lunar-date" :data-content="parseDate(day.id)">{{ parseDate(day.id) }}</span>-->
      </div>
    </template>
  </v-calendar>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import lunar from 'lunar-calendar'
import { ILunarDate } from '@/types'

// 定义一个响应式变量来存储选中的日期
const selectedDate = ref<Date | null>(null)

// 获取农历日期的函数
const parseDate = (date: string): string => {

  const lunarDate = getLunarDate(date)

  if (lunarDate.solarFestival && lunarDate.solarFestival.length <= 3) {
    return lunarDate.solarFestival.length === 3
        ? lunarDate.solarFestival.replace('节', '')
        : lunarDate.solarFestival
  }

  if (lunarDate.lunarFestival && lunarDate.lunarFestival.length <= 3) {
    return lunarDate.lunarFestival.length === 3
        ? lunarDate.lunarFestival.replace('节', '')
        : lunarDate.lunarFestival
  }

  if (lunarDate.lunarDayName === '初一') {
    return lunarDate.lunarMonthName
  }

  return lunarDate.lunarDayName
}

const handleSelect = (date: string) => {
  console.log(getLunarDate(date))
}

const getLunarDate = (date: string): ILunarDate => {
  const dateArray = date.split('-')
  const year = parseInt(dateArray[0])
  const month = parseInt(dateArray[1])
  const day = parseInt(dateArray[2])

  return lunar.solarToLunar(year, month, day)
}
</script>

<style lang="scss">
.vc-container {
  .lunar-date {
    color: darkgray;
    font-size: small;
    transform: scale(0.8);
  }
}
</style>
